<template>
    <div class="loginpage">
        <div class="logincentent">
            <div class="logintop">
                <p>饿了么</p>
                <p>Everything 30°</p>
            </div>
            <div class="tab">
                <ul>
                    <li @click="show=0,on1()" :class="xianshi">短信登录</li>
                    <li @click="show=1,on()" :class="xianshi1">密码登录</li>
                </ul>
                <form>
                    <div class="content" v-show="show==0">
                        <input type="text" placeholder="手机号">
                        <input type="text" placeholder="验证码">
                        <p>温馨提示:未注册饿了么账号的手机号，登录时将自动注册，且代表您已同意<a>《用户服务协议》</a></p>
                    </div>
                    <div class="content2" v-show="show==1">
                        <input type="text" placeholder="手机/邮箱/用户名">
                        <input type="text" placeholder="密码">
                    </div>
                    <router-link to="/index"><button>登录</button></router-link>
                    <p class="end">关于我们</p>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            show:0,
            xianshi:"active",
            xianshi1:""
        }
    },
    methods:{
        on(){
            this.xianshi = '';
            this.xianshi1 = 'active';
        },
        on1(){
            this.xianshi = 'active';
            this.xianshi1 = '';
        }
    }
}
</script>

<style>
    .loginpage{
        position: relative;
        width: 100%;
        height: 100vh;
        background-color: white;
        margin-top: 1.875rem;
    }
    .logincentent{
        width: 18.75rem;
        margin: 0 auto;
    }
    .logintop{
        color: rgb(29, 125, 170);
        text-align: center;
        margin-bottom: 2.5rem;
    }
    .logintop p:first-child{
        font-size: 3.25rem;
    }
    .tab ul{
        display: flex;
        width: 18.75rem;
        margin-bottom: 1rem;
    }
    .tab ul li{
        width: 4.375rem;
        text-align: center;
        height: 1.875rem;
        list-style:none;
        margin-left: 2.5rem;
        margin-right: 2.5rem;
    }
    .loginpage input{
        width: 18.75rem;
        height: 2.5rem;
        margin-bottom: 0.75rem;
        border: #e8e8e8 1px solid;
        outline-color: blue;
        padding-left: 0.625rem;
    }
    .content p{
        font-size: 0.875rem;
        color: #919191;
        margin-bottom: 1.875rem;
    }
    .content p a{
        color: #2395ff;
    }
    .loginpage button{
        width: 18.75rem;
        border: none;
        background-color: #4cd96f;
        height: 2.625rem;
        line-height: 2.625rem;
        color: white;
        text-align: center;
        cursor: pointer;
        border-radius: 2px;
    }
    .end{
        font-size: 0.875rem;
        color: #919191;
        text-align: center;
        margin-top: 0.75rem;
        cursor: pointer;
    }
    .active{
        color: #2395ff;
        font-weight: 700;
        border-bottom: 2px solid #2395ff;
    }
</style>
